<template>
	<!-- 登录 -->
	<view class="me-header" style="bbackground: linear-gradient(180deg,#0081ff,#069cff 10%,rgba(255,214,41,.01) 90%);
}">
		<view class="" style="height: 250rpx; width: 100%;">

		</view>
		<view class="form-box">
			<view class="form-item">
				<view class="form" style="">
					<input type="text" class="pl-5" style="" v-model="user.mail" placeholder="请输入邮箱" />
					<view style="position: absolute; top: -20rpx;left: 50rpx;">
						<view
							style="background: #fff;text-align: center; width: 80rpx;height: 30rpx;font-size: 28rpx;font-family: PingFang SC;font-weight: 400;color: #89878D;">
							账号
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="form-item" >
				<view  class="form" style="">
					<input type="number" class="pl-5" style=""
					 v-model="user.verifyCode" placeholder="请输入验证码" />
					<view  style="position: absolute;top: -20rpx;left: 50rpx;">
						<view class="bgffff text-center" style="background: #fff;text-align: center;width: 100rpx;height: 30rpx;font-size: 28rpx;font-family: PingFang SC;font-weight: 400;color: #89878D;">
							验证码
						</view>
					</view>
					<view @tap="getCode" class="position-absolute" style="position: absolute; z-index: 999; font-size: 28rpx;font-family: PingFang SC;font-weight: 400;color: #2E3CE2;top: 50%;transform: translateY(-50%);right: 30rpx;">
						{{verifyTime == 60 ?'获取验证码':"发送中"+verifyTime}}
					</view>
				</view>
			
			
			
			</view> -->

			<view class="form-item">
				<view class="form" style="">
					<input type="password" class="pl-5" style="" v-model="user.passowrd" placeholder="请输入密码" />
					<view style="position: absolute; top: -20rpx;left: 50rpx;">
						<view
							style="background: #fff;text-align: center; width: 80rpx;height: 30rpx;font-size: 28rpx;font-family: PingFang SC;font-weight: 400;color: #89878D;">
							密码
						</view>
					</view>
				</view>
			</view>

			<view style="margin-top: 50rpx; display: flex;align-items: center;justify-content: center;" @tap="HLogin">
				<view class="btn-login d-flex a-center j-center">
					登 录
				</view>
			</view>

			<view style="margin-top: 50rpx; display: flex;align-items: center;justify-content: center;"
				@tap="toRegister">
				<view style="background: #fff;color: #000;border: 1rpx solid #0081ff;"
					class="btn-login d-flex a-center j-center">
					注 册
				</view>
			</view>



		</view>



		<!-- 
		<view class="" style="position: fixed;bottom: 30rpx;width: 90%;">
			<view style="display: flex;align-items: center;justify-content: center;width: 100%;">
				<view class="" style="width: 145rpx;height: 3rpx;background: #CCCCCC;">

				</view>
				<view class="mx-5" style="margin: 0 50rpx; font-size: 28rpx;font-family: PingFang SC;color: #333333;">
					其他方式登录
				</view>
				<view class="" style="width: 144rpx;height: 3rpx;background: #CCCCCC;">

				</view>
			</view>
			<view class="" style="display: flex;align-items: center;justify-content: center;margin-top: 20rpx;">
				<image style="width: 50rpx;height: 50rpx;" src="../../../static/huiyuan/weixin.png" mode=""></image>
			</view>
		
		</view>

 -->


	</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 验证码获取倒计时60秒
				verifyTime: 60,
				// 用户表单
				user: {
					mail: "",
					verifyCode: "",
					passowrd: ""
				},
				// 是否是获取验证码状态
				isEendCode: false
			}
		},
		async onLoad(e) {
			if (e.id) {
				uni.showLoading({
					title: '登录中...'
				});
				let that = this
				let detail = await uniCloud.callFunction({
					name: 'query_map',
					data: {
						dbName: "wx_user",
						id: e.id
					},
				})

				this.user = detail.result
				// uni.setStorageSync('user', detail.result)
				uni.hideLoading()

				setTimeout(() => {
					uni.reLaunch({
						url: "/pages/my/award-centre/award-centre"
					})
				}, 500)

			}
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo
			}
		},
		mounted() {

		},
		methods: {
			//登录后提交服务器获取进一步信息
			async wxloginres(wxcode) {
			
				// let that = this;

				// var userId = uni.getStorageSync('userId')

				// var mptype
				// // #ifdef MP-WEIXIN
				// mptype = 'wx'
				// // #endif
				// // #ifdef MP-QQ
				// mptype = 'qq'
				// // #endif
				// // #ifdef APP-PLUS
				// mptype = 'app_email'
				// // #endif
				// // #ifdef H5
				// mptype = 'h5'
				// // #endif
				// let authorize = await uniCloud.callFunction({
				// 	name: 'user_mail_login',
				// 	data: {
				// 		mptype: mptype,
				// 		openId: that.user.mail,
				// 		passowrd: that.user.passowrd,
				// 	},
				// })
				// if (authorize.result.success) {
				// 	uni.setStorageSync('user', authorize.result.data)
				// 	that.getUser()
				// 	uni.showToast({
				// 		icon: 'none',
				// 		mask: true,
				// 		title: '登录成功',
				// 		duration: 1500
				// 	})
				// 	// this.$examineDate1()
				// 	// this.$examineDate3()
				// 	setTimeout(() => {
				// 		uni.switchTab({
				// 			url: "/pages/my/my"
				// 		})
				// 	}, 500)
				// 	uni.removeStorageSync('userId')
				// } else {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		mask: true,
				// 		title: authorize.result.msg,
				// 		duration: 1500
				// 	})
				// }


				// that.loginShow = false
			},
			async getUser() {
				var user = uni.getStorageSync('user')
				let that = this
				let detail = await uniCloud.callFunction({
					name: 'query_map',
					data: {
						dbName: "wx_user",
						id: user._id
					},
				})
				this.user = detail.result
				uni.setStorageSync('user', detail.result)
				// that.$u.vuex('vuex_user', detail.result)
			},

			toRegister() {
				uni.navigateTo({
					url: "/pages/my/login/register"
				})
			},
			// 获取验证码
			async getCode() {
				var isMobile = this.$U.reg.isEmail(this.user.mail)
				if (isMobile) {
					return
				}
				if (!this.isEendCode) {
					var data = await this.$api.h5AuthCode({
						mail: this.user.mail
					})
					console.log(data)
					if (data.code == 1) {
						this.isEendCode = true
						var time = setInterval(() => {
							if (this.verifyTime == 0) {
								this.verifyTime = 60
								this.isEendCode = false
								clearInterval(time)
								return
							}
							this.verifyTime--
						}, 1000)

					} else {
						uni.showToast({
							title: '验证码发送失败',
							icon: "none"
						})
					}

				}

			},
			// h5注册
			async HLogin() {
				var isMobile = this.$U.reg.isEmail(this.user.mail)
				if (isMobile) {
					return
				}

				if (this.user.passowrd.length < 3) {
					return uni.showToast({
						title: "密码不能小于3位",
						icon: "none"
					})
				}

				uni.showLoading({
					title: '登录中...'
				});
				vk.userCenter.login({
					data:{
						username: this.user.mail,
						password: this.user.passowrd
					},
					success: (data) => {
						// uni.setStorageSync('user', data.userInfo)
						vk.alert("登陆成功!");
						
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/my/my"
								})
							}, 500)
					}
				});







			}



		}
	}
</script>

<style>
	page {
		background: #fff;
	}

	.btn-login {
		width: 85vw;
		height: 90rpx;
		background: linear-gradient(80deg, #0081ff, #069cff);
		box-shadow: 0px 5rpx 9rpx 0px rgba(0, 0, 0, 0.2);
		border-radius: 41rpx;
		display: flex;
		align-items: center;
		justify-content: center;


		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;

	}
</style>

<style scoped lang="scss">
	.form-box {
		.form-item {
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.form {
				position: relative;
				box-sizing: border-box;
				border-radius: 50rpx;
				width: 651rpx;
				height: 98rpx;

				input {
					font-size: 35rpx;
					box-sizing: border-box;
					border-radius: 50rpx;
					width: 651rpx;
					height: 98rpx;
					border: 1rpx solid #B0AFB5;
					padding: 0 30rpx;
				}
			}
		}
	}

	.me-header {
		padding: 30rpx;
		position: relative;
		background: linear-gradient(180deg, #0081ff, #069cff 10%, rgba(255, 214, 41, .01) 90%);
		height: 340rpx;
		z-index: 2;
	}
</style>
